<template>
<div>

    <div>
        <Row>
        <Col span="8">
            <Input style="width:200px;" v-model="filter.name">
            <Button slot="append" icon="ios-search" @click="search" ></Button>
            </Input>
        </Col>
        <Col span="8">
            <div style="width:200px;">
                <Cascader :data="data" @on-change="onChangeProduct"></Cascader>
            </div>
        </Col>
        <Col span="8">
            <ButtonGroup>
                <Button type="primary" style="margin-right:10px" @click="addDate">添加数据</Button>
                <Button type="error" @click="removes">批量删除</Button>
            </ButtonGroup>
        </Col>
        </Row>
    </div>

    <div>
        <Table border :columns="columns" :data="list" @on-selection-change="onSelectionChange"></Table>
        <Page :total="filter.total" :page-size="filter.rows" @on-change="onPagechange" @on-page-size-change="onPagesizechange" show-sizer ></Page>
    </div>
    <Modal
        v-model="operateModal"
        title="数据处理"
        @on-cancel="cancel"
        >
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="产品名称" prop="id" v-show="showId">
            <Cascader :data="data" @on-change="onChangeProduct"></Cascader>
        </FormItem>
        <FormItem label="产品名称" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="产品ID" prop="titleId">
            <Input v-model="formValidate.titleId" placeholder="Enter your titleId"></Input>
        </FormItem>
        <FormItem label="产品详情" prop="connect">
            <Input v-model="formValidate.connect" placeholder="Enter your connect"></Input>
        </FormItem>
        <FormItem label="父Id" prop="cateId" style="display:none">
            <Input v-model="formValidate.cateId"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    <div slot="footer">
           数据操作！
        </div>
    </Modal>
</div>    
</template>
<script>

export default {
    data(){
        return {
            data:[],
            list:[],
            filter:{
                total:0,
                rows:10,
                page:1,
                name:''
                
            },
            ids:[],
           showId:true,
            id:0,
            operateModal:false,

            formValidate: {
                    name: '',
                    titleId: '',
                    connect:'',
                    cateId:'5b4575673e39924df8660e68',
                },
            ruleValidate: {
                    name: [
                        { required: true, message: '产品名称不能为空', trigger: 'blur' }
                    ],
                    titleId: [
                        { required: true, message: '产品ID不能为空', trigger: 'blur' },
                    ],
                    connect: [
                        { required: true, message: '产品详情不能为空', trigger: 'blur' }
                    ],
                   
                },
            columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '产品',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '产品编号',
                        key: 'titleId'
                    },
                    {
                        title: '产品详情',
                        key: 'connect'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editDate(params)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
        }
    },
    
    methods:{
        //点击分类
        onChangeProduct(a,b){
            
            if(b!=''){
                this.showId=false
                this.parentId=b[2]._id
                this.formValidate.cateId=b[2]._id
            }else{
                this.showId=true
                this.parentId=''
            }
            this.filter.page=1
            this.getproductData()
        },

        
        //点击修改
        editDate(params){           
            this.axios({
                url:`http://localhost:3000/product/data/${params.row._id}`,
                method:'get'
            }).then(res=>{
                this.formValidate=res.data;
                this.operateModal=true;
                this.id=params.row._id;
                 
            })
        },
        //删除一个
        remove (params) {
            this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    this.axios({
                        url:`http://localhost:3000/product/data/${params.row._id}`,
                        method:'delete'
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getproductData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //添加数据,清除表单
        addDate(){
            this.formValidate={}
           this.formValidate.cateId=this.parentId
            this.operateModal=true
        },
        //删除多个
        removes(){
           
           this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗</p>',
                onOk: () => {
                    

                    this.axios({
                        url:`http://localhost:3000/product/removes`,
                        method:'post',
                        data:{
                            ids:this.ids.toString()
                        }
                    }).then(res=>{
                        this.$Message.info('删除数据成功')
                        this.getproductData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        //提交表单
        handleSubmit (name) {
            
            this.$refs[name].validate((valid) => {
                if (valid) {

                    if(this.id!=0){
                        this.axios({
                            url:`http://localhost:3000/product/data/${this.id}`,
                            method:'put',
                            data:this.formValidate
                        }).then(res=>{
                        this.$Message.success('数据操作成功')
                        this.operateModal=false;
                        this.getproductData()
                        this.id=0
                        this.$refs[name].resetFields();
                        })
                    }else{
                        this.axios({
                        url:`http://localhost:3000/product/data`,
                        method:'post',
                        data:this.formValidate
                    }).then(res=>{
                        this.$Message.success('数据操作成功')
                        this.operateModal=false;
                        this.getproductData()
                        this.$refs[name].resetFields();
                        
                    })  
                    }
                   
                } else {
                    this.$Message.error('Fail!');
                }
            })
        },
        cancel () {
            this.$Message.info('Clicked cancel');
            this.id=0
        },
        //清除表单
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        //获取分类
        getlistData(){
            this.axios({
                url:`http://localhost:3000/cate/list/1`,
                method:'get'
            }).then(res=>{
                this.data=res.data
            })
        },
        //获取数据
        getproductData(){
            this.axios({
                url:`http://localhost:3000/product/list`,
                method:'post',
                data:{
                rows:this.filter.rows,
                page:this.filter.page,
                cateId:this.parentId,
                name:this.filter.name,
                }
            }).then(res=>{
                this.list=res.data.rows;
                this.filter.total=res.data.total;
            })
        },
        //搜索
        search(){
            this.filter.page=1
            this.getproductData()
        },
        onPagechange(page){
            this.filter.page=page;
            this.getproductData()
        },
        onPagesizechange(rows){
            this.filter.rows=rows;
            this.getproductData()
        },
        onSelectionChange(selection){
            var ids=[]
            for(let i=0;i<selection.length;i++){
                ids.push(selection[i]._id)
            }
            this.ids=ids
        },
        
        
    },
    
    mounted(){
        this.getlistData()
        this.getproductData()
    }
}
</script>

